<template>
  <page-container>
    <a-card size="small">
      <div style="display: flex; justify-content: space-between">
        <div></div>
        <a-radio-group
          v-model:value="viewClassify"
          button-style="solid"
          @change="viewClassifyChange"
        >
          <a-radio-button value="0">智能分类</a-radio-button>
          <a-radio-button value="1">传统分类</a-radio-button>
        </a-radio-group>
        <div></div>
      </div>
    </a-card>
    <supper-select
      v-if="viewClassify === '0'"
      style="margin-top: 20px"
      @change="supperSelectChange"
      :options="supperSelectOptions"
    ></supper-select>

    <supper-select
      v-else
      style="margin-top: 20px"
      @change="supperSelectChange"
      :options="supperSelectOptions1"
    ></supper-select>
    <a-card size="small">
      <div style="float: left; width: 400px">
        <a-input-group compact>
          <a-select v-model:value="ListParams.searchType">
            <a-select-option value="0">搜乱点</a-select-option>
            <a-select-option value="1">搜警情</a-select-option>
          </a-select>
          <a-input-search
            style="width: 70%"
            v-model:value="ListParams.inputParams"
            @search="inputSearch"
            placeholder="请输入关键词"
          />
        </a-input-group>
      </div>
      <div style="float: right">
        <span style="width: 70px">报警时间：</span>
        <a-space direction="vertical" :locale="zhCN">
          <!-- <a-range-picker @change="pickerChange" v-model:value="valueTime" :format="dateFormat" /> -->
          <pickers :data="valueTime" @setTime="pickerChange" />
        </a-space>

        <a-radio-group
          style="margin-left: 20px"
          v-model:value="viewShow"
          button-style="solid"
          @change="viewShowChange"
        >
          <a-radio-button value="a">统计</a-radio-button>
          <a-radio-button value="b">趋势</a-radio-button>
        </a-radio-group>
      </div>
    </a-card>

    <a-spin :spinning="spinning" tip="正在加载...">
      <a-card v-if="cardList == '' || cardList == null">
        <div><a-empty /></div>
      </a-card>
      <a-row :gutter="25" type="flex" class="card-list">
        <a-col
          :xl="12"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
          class="card-item"
          v-for="(item, index) in cardList"
          :key="item.securityNo"
        >
          <proportion-sales
            @details-click="detailsClick(index)"
            @survey-click="surveyClick(index)"
            @attention-click="attentionClick(index)"
            @handleDetailParams="handleDetailQuery(index)"
            @updateName="updateName"
            :date="dateList"
            :detailQuery="detailQuery"
            :index="index"
            :card-item="item"
            :view-type="viewShow"
            :view-classify="viewClassify"
            :value-list="ListParams"
          ></proportion-sales>
        </a-col>
      </a-row>
      <a-pagination
        v-if="cardList != '' && cardList != null"
        style="text-align: center; margin-top: 20px"
        show-quick-jumper
        v-model:current="current1"
        :total="securityNum"
        @change="onChange"
      />
    </a-spin>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onActivated, createVNode } from 'vue';
import moment, { Moment } from 'moment';
import GridContent from '@/components/base-layouts/grid-content/index.vue';
import SupperSelect from '@/components/supper-select/index.vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import 'moment/dist/locale/zh-cn';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import ProportionSales from './proportion-sales.vue';
import {
  getQuerySecurityInfo,
  getOperate,
  getQueryTime,
  getUpdateSecurityName,
} from '@/api/district-monitoring/jurisdiction-list/list';
import { getParamsCodes, getParamsNames } from '@/components/supper-select/index.js';

import { CardItem, BrokenLineItem } from './typing';
import { Modal } from 'ant-design-vue';
import pickers from '@/components/s-picker/picker.vue';
export default defineComponent({
  name: 'jurisdictionList',
  setup() {
    let ListParams = ref<any>({
      callTimeStart: '', //开始时间
      callTimeEnd: '', //结束时间
      xqdwCodes: '',
      classifyCodes: '',
      callSummaryCodes: '',
      dealSummaryCodes: '',
      securityType: 'xqdw',
      classifyType: '0', //智能分类<=>传统分类
      showType: '0', //环形图<=>折线图
      page: 1,
      size: 10,
      inputType: '',
      inputParams: '',
      searchType: '0',
      subdivisionFlag: 'Y',
      trafficFlag: 'N',
      otherFlag: 'N',
    });
    const supperSelectOptions = ref([
      {
        type: 'ai',
        visible: true,
      },
      {
        type: 'jq',
        visible: false,
      },
      {
        type: 'fk',
        visible: false,
      },
      {
        type: 'xqdw',
        visible: true,
      },
    ]);

    const supperSelectOptions1 = ref([
      {
        type: 'ai',
        visible: false,
      },
      {
        type: 'jq',
        visible: true,
      },
      {
        type: 'fk',
        visible: true,
      },
      {
        type: 'xqdw',
        visible: true,
      },
    ]);
    const detailQuery = ref({});
    const router = useRouter();
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const valueTime = ref<Moment[]>();
    const viewShow = ref<string>('a');
    const viewClassify = ref<string>('0');
    const current1 = ref<number>(1);
    const securityNum = ref<number>();
    const spinning = ref<boolean>(true);
    const cardList = ref<Array<CardItem> | Array<BrokenLineItem>>([]);
    const dateList = ref<any>({});
    //跳转详情
    const detailsClick = index => {
      let routeUrl = router.resolve({
        path: '/districtMonitoring/jurisdiction-details',
        query: {
          securityNo: cardList.value[index].securityNo,
          securityName: cardList.value[index].securityName,
          concernStatus: cardList.value[index].concernStatus,
          securityCaseNum: cardList.value[index].securityCaseNum,
          classifyType: viewClassify.value,
          callTimeStart: ListParams.value.callTimeStart,
          callTimeEnd: ListParams.value.callTimeEnd,
          activeKey: '2',
          name: JSON.stringify(names.value),
          inputParams: ListParams.value.searchType === '1' ? ListParams.value.inputParams : '',
        },
      });
      window.open(routeUrl.href, '_blank');
    };
    const handleDetailQuery = index => {
      detailQuery.value = {
        securityNo: cardList.value[index].securityNo,
        securityName: cardList.value[index].securityName,
        concernStatus: cardList.value[index].concernStatus,
        securityCaseNum: cardList.value[index].securityCaseNum,
        classifyType: viewClassify.value,
        callTimeStart: ListParams.value.callTimeStart,
        callTimeEnd: ListParams.value.callTimeEnd,
        activeKey: '1',
        name: JSON.stringify(names.value),
        inputParams: ListParams.value.searchType === '1' ? ListParams.value.inputParams : '',
      };
    };
    //跳转监测
    const surveyClick = index => {
      let routeUrl = router.resolve({
        path: '/districtMonitoring/jurisdiction-details',
        query: {
          securityNo: cardList.value[index].securityNo,
          securityName: cardList.value[index].securityName,
          concernStatus: cardList.value[index].concernStatus,
          securityCaseNum: cardList.value[index].securityCaseNum,
          classifyType: viewClassify.value,
          callTimeStart: ListParams.value.callTimeStart,
          callTimeEnd: ListParams.value.callTimeEnd,
          activeKey: '7',
          name: JSON.stringify(names.value),
          inputParams: ListParams.value.searchType === '1' ? ListParams.value.inputParams : '',
        },
      });
      window.open(routeUrl.href, '_blank');
    };
    //报警时间
    const getTime = async () => {
      const res = await getQueryTime({ module: 'ZALD' });
      if (res.code === 200) {
        ListParams.value.callTimeStart = res.data.callTimeStart;
        ListParams.value.callTimeEnd = res.data.callTimeEnd;
        dateList.value = {
          callTimeStart: res.data.callTimeStart,
          callTimeEnd: res.data.callTimeEnd,
        };
        valueTime.value = [
          moment(res.data.callTimeStart, dateFormat),
          moment(res.data.callTimeEnd, dateFormat),
        ];
      }
      getList();
    };
    //列表接口
    const getList = async () => {
      current1.value = 1;
      ListParams.value.page = 1;
      const res = await getQuerySecurityInfo(ListParams.value);
      spinning.value = false;
      if (res.code === 200) {
        cardList.value = res.data.dataList;
        securityNum.value = res.data.securityNum;
      }
    };
    //统计<=>趋势
    const viewShowChange = async () => {
      spinning.value = !spinning.value;
      if (viewShow.value == 'a') {
        // cardList.value = mockData.RESULT.dataList;
        ListParams.value.showType = '0';
        getList();
      } else {
        // cardList.value = brokenline.RESULT.dataList;
        ListParams.value.showType = '1';
        getList();
      }
    };
    //智能分类<=>传统分类
    const viewClassifyChange = async () => {
      spinning.value = !spinning.value;
      ListParams.value.xqdwCodes = '';

      if (viewClassify.value == '0') {
        ListParams.value.classifyType = '0';
        ListParams.value.callSummaryCodes = '';
        ListParams.value.dealSummaryCodes = '';
        getList();
      } else {
        ListParams.value.classifyType = '1';
        ListParams.value.classifyCodes = '';

        getList();
      }
    };
    //分页
    const onChange = async (pageNumber: number) => {
      spinning.value = !spinning.value;
      ListParams.value.page = pageNumber;
      const res = await getQuerySecurityInfo(ListParams.value);
      spinning.value = !spinning.value;
      if (res.code === 200) {
        cardList.value = res.data.dataList;
        securityNum.value = res.data.securityNum;
      }
    };
    //搜索框
    const inputSearch = () => {
      spinning.value = !spinning.value;
      getList();
    };
    //时间选择器
    const pickerChange = value => {
      spinning.value = !spinning.value;
      ListParams.value.callTimeStart = value[0] ? value[0] : '';
      ListParams.value.callTimeEnd = value[1] ? value[1] : '';
      dateList.value = {
        callTimeStart: ListParams.value.callTimeStart,
        callTimeEnd: ListParams.value.callTimeEnd,
      };
      getList();
    };

    //关注
    const attentionClick = async (index: number) => {
      if (cardList.value[index].concernStatus == '0') {
        spinning.value = !spinning.value;
        const ListConcernParams = reactive({
          securityNo: cardList.value[index].securityNo,
          securityName: cardList.value[index].securityName,
          remark: '',
          concernStatus: '1',
        });
        const res = await getOperate(ListConcernParams);
        spinning.value = !spinning.value;
        if (res.code === 200) {
          cardList.value[index].concernStatus = '1';
        }
      } else {
        showConfirm(index);
      }
    };
    //取消关注
    const showConfirm = index => {
      Modal.confirm({
        title: '确定取消关注吗？',
        icon: createVNode(ExclamationCircleOutlined),
        content: '取消关注，该乱点将会丢失！',
        onOk() {
          spinning.value = !spinning.value;
          const ListConcernParams = reactive({
            securityNo: cardList.value[index].securityNo,
            securityName: cardList.value[index].securityName,
            remark: '',
            concernStatus: '0',
          });
          getOperate(ListConcernParams)
            .then(res => {
              if (res.code === 200) {
                cardList.value[index].concernStatus = '0';
              }
            })
            .finally(() => {
              spinning.value = !spinning.value;
            });
        },
        class: 'test',
      });
    };

    //修改名称
    const updateName = async (securityName, index) => {
      spinning.value = !spinning.value;
      const UpdateSecurityName = reactive({
        securityNo: cardList.value[index].securityNo,
        securityName: securityName,
      });
      const res = await getUpdateSecurityName(UpdateSecurityName);
      spinning.value = !spinning.value;
      if (res.code === 200) {
        cardList.value[index].securityName = securityName;
        message.success('修改成功！');
      }
    };

    const names = ref<any>({});
    const supperSelectChange = data => {
      spinning.value = !spinning.value;
      names.value = getParamsNames(data);
      const { ai, jq, fk, xqdw } = getParamsCodes(data);
      ListParams.value.classifyCodes = ai;
      ListParams.value.callSummaryCodes = jq;
      ListParams.value.dealSummaryCodes = fk;
      ListParams.value.xqdwCodes = xqdw;
      getList();
    };

    onActivated(() => {
      getTime();
    });
    return {
      valueTime,
      cardList,
      ListParams,
      detailsClick,
      surveyClick,
      attentionClick,
      viewShowChange,
      GridContent,
      viewShow,
      moment,
      dateFormat,
      current1,
      onChange,
      showConfirm,
      spinning,
      updateName,
      zhCN,
      viewClassify,
      viewClassifyChange,
      inputSearch,
      pickerChange,
      securityNum,
      supperSelectChange,
      getTime,
      dateList,
      names,
      supperSelectOptions,
      supperSelectOptions1,
      detailQuery,
      handleDetailQuery,
    };
  },
  components: {
    ProportionSales,
    SupperSelect,
    pickers,
  },
});
</script>

<style lang="less" scoped>
.card-item {
  margin-top: 20px;
}
</style>
